/*
 * Copyright (c) 2020 the original author or authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

@import './colors.scss';
@import './mixins.scss';

.container {
  width: 600px;
  color: #787878;

  .search__form {
    display: flex;
    flex-direction: column;

    &--label {
      font-weight: 600;
      margin-bottom: 10px;
    }

    &--input {
      padding: 8px 25px 8px 8px;
      width: 100%;
      border: none;
      border-bottom: 1px solid $light-gray;
      background: none;
      font-size: 14px;
      box-sizing: border-box;
      outline: none;

      &::placeholder {
        color: $gray;
      }
    }
  }

  .user {
    border: 1px solid $gray;
    border-radius: 15px;
    margin: 2rem 0;
    padding: 0 0.2rem 2rem 2rem;
    background: #f5f5f5;

    &__container {
      display: flex;
      width: 100%;

      .title {
        margin: 1rem 0 0.5rem 0;
        color: rgb(63, 63, 63);
        font-weight: 600;
        font-size: 1.2rem;
      }
      &--users {
        width: 60%;
      }
      &--roles {
        width: 40%;
      }
    }

    &__list {
      max-height: 250px;
      overflow-y: scroll;
      padding-right: 1.8rem;

      &--items {
        display: flex;
        box-sizing: border-box;
        border-bottom: 1px solid #bebebe;
        padding: 0.5rem 0 0;
        width: 100%;
      }
    }

    &__name {
      font-size: 14px;
      width: 60%;
    }

    &__role {
      &--select {
        width: 25%;
        color: #787878;
        text-align: start;
        text-transform: capitalize;
        background: none;
        border: none;
        outline: none;
      }

      &--option {
        background: #dadada;
      }

      &--option[disabled] {
        background: #7e7e7e;
        color: white;
      }
    }

    &__delete {
      width: 15%;
      border: none;
      background: none;

      &--icon {
        cursor: pointer;
        float: right;
      }
    }
  }

  &__btn {
    cursor: pointer;
    padding: 0.7rem 2.5rem;
    color: #787878;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-weight: bold;
  }

  .button-cross {
    position: absolute;
    top: -1.5rem;
    right: 0rem;
  
    .mat-icon {
      @include sm-icon-size(16px)
    }
  }
}
